<template>
  <div class="page">
    <div ref="tableHeaderContainer" class="base-search-group-container">
      <form class="base-search" onsubmit="return false;">

        <div class="base-search-row jus-end">

          <div class="base-search-row">
            <el-select
              v-model="targetType"
              @change="chooseSourceType"
              class="srp-list-form-item"
              style="width: 180px;"
            >
              <el-option key="0" value="备件库" :label="$t('sparepart.setting.repertory.label4')"></el-option>
              <el-option v-if="_isShowSparePartPerson" key="1" value="个人备件库" :label="$t('personal.modal.tabData.spareParts')"></el-option>
            </el-select>
          </div>
          <div class="base-search-col ml_12">
              <el-select
                v-model="model.sourceIds"
                @change="chooseRepertory"
                class="srp-list-form-item srp-list-form-item-origin"
                style="width: 180px;"
                multiple
                filterable
                collapse-tags
                :placeholder="$t('common.form.preview.stock.sparepartStockDisplayName.sourceTargetName')"
              >
              <div 
                v-infinite-scroll="onScroll1" 
                :infinite-scroll-distance="infiniteData.distance"
                :infinite-scroll-disabled="infiniteData.disabled"
                :infinite-scroll-delay="infiniteData.delay"
              >
                <el-option
                  v-for="item in repertory_1"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                  :origin="item"
                >
                  <template v-if="isOpenData && item.staffId && targetType == '个人备件库'">
                    <open-data type="userName" :openid="item.staffId"></open-data>
                  </template>
                </el-option>
              
                <template slot="multiple" slot-scope="{ item }">
                  <template v-if="isOpenData && targetType == '个人备件库'">
                    <open-data type="userName" :openid="item.staffId"></open-data>
                  </template>
                  <template v-else>
                    {{ item.name || item.displayName }}
                  </template>
                </template>
                </div>
            </el-select>
          </div>
          <div class='repertory-apply-view-header-search input-with-append-search ml_12'>
            <el-input v-model="model.keyWord" :placeholder="$t('common.form.preview.subSparePart.pla2')" v-trim:blur>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" type='primary' @click="model.pageNum=1;search();trackEventHandler('search')" native-type="submit" v-track="$track.formatParams('KEYWORD_SEARCH')">{{ $t('common.base.search') }}</el-button>
            </el-input>
            <el-button type="plain-third" style="margin-left:12px;" @click="resetAll();trackEventHandler('reset')" v-track="$track.formatParams('RESET_SEARCH')">{{ $t('common.base.reset') }}</el-button>
          </div>
          <div
            class="advanced-search-visible-btn"
            @click.stop="isExpand = !isExpand;trackEventHandler('advSearch')"
          >
            <i class="iconfont icon-filter task-font14"></i>
            {{ $t('common.base.advancedSearch') }}
          </div>
        </div>

        <div class="base-search-row">
          <div class="repertory-apply-view-header-state">
            {{$t('part.text33')}}：
            <el-select
              v-model="model.state"
              @change="chooseState"
              class="srp-list-form-item"
              style="width: 150px;"
              multiple
              collapse-tags
              :placeholder="$t('common.placeholder.select')"
            >
              <el-option
                v-for="item in stateArr"
                :value="item.value"
                :label="item.label"
                :key="item.key"
              ></el-option>
            </el-select>
          </div>
          <div class="repertory-apply-view-header-state">
            {{$t('part.field4')}}：
            <el-select
              v-model="model.type"
              @change="chooseApplyType"
              class="srp-list-form-item"
              style="width: 150px;"
              multiple
              collapse-tags
              :placeholder="$t('common.placeholder.select')"
            >
              <el-option
                v-for="item in typeArr"
                :value="item.value"
                :label="item.label"
                :key="item.key"
              ></el-option>
            </el-select>
          </div>
          <div class="repertory-apply-view-header-search">
            {{$t('common.label.sponsor')}}：
            <publink-select
              class="srp-list-form-item"
              style="width: 180px;"
              v-model="userApply.prosperId"
              @change="chooseUserApply"
              filterable
              clearable
              remote
              :placeholder="$t('common.placeholder.select')"
              :filter-method="fetchUserApply"
              @visible-change="visibleUserApply"
              :loading="userApply.loading"
              v-el-select-loadmore="UserApplyloadMoreOptions"
            >
              <el-option
                v-for="item in userApply.options"
                :key="item.userId"
                :label="item.displayName"
                :origin="item"
                :value="item.userId"
              >
                <div class="srp-user-item">
                  <img :src="item.head || '/resource/images/account_userhead.png'" />
                  <p>
                    <template v-if="isOpenData && item.staffId">
                      <open-data type="userName" :openid="item.staffId"></open-data>
                    </template>
                    <template v-else>
                      {{item.displayName}} 
                    </template>
                  </p>
                </div>
              </el-option>
              <!-- <template slot="multiple" slot-scope="{ item }">
                <template v-if="isOpenData && item.staffId">
                  <open-data type="userName" :openid="item.staffId"></open-data>
                </template>
                <template v-else>
                  {{item.name || item.displayName}}
                </template>
              </template> -->
            </publink-select>
            <div class="ml_12" style="width:353px">
              {{$t('part.field5')}}：
              <el-date-picker
                @change="seeTime"
                v-model="timeValue"
                style="width:272px!important"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="-"
                :start-placeholder="$t('common.base.startDate')"
                :end-placeholder="$t('common.base.endDate')"
                :picker-options="pickerOptions2"
                value-format="timestamp"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </div>
          </div>
        </div>
      </form>
    </div>

    <base-search-drawer
      :show='isExpand'
      @close='closeDrawer'
      @reset='reset'
      @search='search'
      :show-setting='false'
    >
      <el-form label-position="top" :model='model'>
        <el-form-item :label="$t('part.field3')">
          <el-select
            v-model="sourceType"
            @change="chooseTargetType"
            class="srp-list-form-item"
            style="width: 120px;"
          >
            <el-option key="0" value="备件库" :label="$t('sparepart.setting.repertory.label4')"></el-option>
            <el-option v-if="_isShowSparePartPerson" key="1" value="个人备件库" :label="$t('common.pageTitle.pagePartRepertoryPersonList')"></el-option>
          </el-select>
          <el-select
            v-model="model.targetIds"
            class="srp-list-form-item flex-1"
            style="margin-left:1px;"
            multiple
            filterable
            collapse-tags
            :placeholder="$t('part.field3')"
          >
            <div 
                v-infinite-scroll="onScroll2" 
                :infinite-scroll-distance="infiniteData.distance"
                :infinite-scroll-disabled="infiniteData.disabled"
                :infinite-scroll-delay="infiniteData.delay"
              >

            <el-option
              v-for="item in repertory_2"
              :key="item.id"
              :value="item.id"
              :label="item.name"
              :origin="item"
            >
              <div class="srp-user-item" v-if="sourceType == '个人备件库'">
                <img :src="item.head || '/resource/images/account_userhead.png'">
                <p>
                  <template v-if="isOpenData">
                    <open-data type="userName" :openid="item.staffId"></open-data>
                  </template>
                  <template v-else>
                    {{ item.name || item.displayName }}
                  </template>
                </p>
              </div>
            </el-option>
            
            <template slot="multiple" slot-scope="{ item }">
              <template v-if="isOpenData && sourceType == '个人备件库'">
                <open-data type="userName" :openid="item.staffId"></open-data>
              </template>
              <template v-else>
                {{ item.name || item.displayName }}
              </template>
            </template>
            </div>
          </el-select>

        </el-form-item>
        <el-form-item :label="$t('common.fields.partName.displayName')">
          <el-select
            popper-class="common-advance-popper"
            style="width: 100%;"
            :value="sparepart.sparepartName"
            @input="chooseSparepart"
            filterable
            clearable
            remote
            :placeholder="$t('common.placeholder.select')"
            :remote-method="fetchSparepart"
            :loading="sparepart.loading"
          >
            <el-option
              v-for="item in sparepart.options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <div class="part-option">
                <p>{{$t('common.label.serialNumber')}}：{{item.serialNumber}}</p>
                <p>{{$t('common.base.name')}}：{{item.name}}</p>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('common.form.preview.stock.sparepartStockDisplayName.approveName')">
          <publink-select
            class="srp-list-form-item"
            style="width: 100%;"
            v-model="userApprove.approveId"
            @change="chooseUserApprove"
            filterable
            clearable
            remote
            :placeholder="$t('common.placeholder.select')"
            :filter-method="fetchUserApprove"
            @visible-change="visibleUserApprove"
            :loading="userApprove.loading"
            v-el-select-loadmore="UserApproveloadMoreOptions"
          >
            <el-option
              v-for="item in userApprove.options"
              :key="item.userId"
              :label="item.displayName"
              :value="item.userId"
              :origin="item"
            >
              <div class="srp-user-item">
                <img :src="item.head || '/resource/images/account_userhead.png'" />
                <p>
                  <template v-if="isOpenData && item.staffId">
                    <open-data type="userName" :openid="item.staffId"></open-data>
                  </template>
                  <template v-else>
                    {{item.displayName}} 
                  </template>
                </p>
              </div>
            </el-option>
            <!-- <template slot="multiple" slot-scope="{ item }">
              <template v-if="isOpenData && item.staffId">
                <open-data type="userName" :openid="item.staffId"></open-data>
              </template>
              <template v-else>
                {{item.name || item.displayName}}
              </template>
            </template> -->
          </publink-select>
        </el-form-item>
        <el-form-item :label="$t('part.field5')">
          <el-date-picker
            @change="seeTime"
            style="width:100%"
            v-model="timeValue"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            :start-placeholder="$t('common.base.startDate')"
            :end-placeholder="$t('common.base.endDate')"
            :picker-options="pickerOptions2"
            value-format="timestamp"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('part.field29')">
          <el-date-picker
            @change="seeUpdateTime"
            style="width:100%"
            v-model="updateTimeValue"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            :start-placeholder="$t('common.base.startDate')"
            :end-placeholder="$t('common.base.endDate')"
            :picker-options="pickerOptions2"
            value-format="timestamp"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </base-search-drawer>

    <div ref="tableDoContainer" class="page-panel" style="margin: 0;">
      <div class="page-panel-body">
        <div class="pull-right">
          <el-button-group>
            <el-dropdown :hide-on-click="false" trigger="click" :show-timeout="150" v-track="$track.formatParams('SELECT_COLUMN')">
              <span class="el-dropdown-link cur-point ml_12">
                {{ $t('common.base.choiceCol') }}
                <i class="iconfont icon-more"></i>
              </span>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(column,index) in columns" :key="column.field">
                  <el-checkbox
                    :value="column.show"
                    @input="chooseColnum(column,index)"
                  >{{column.label}}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button-group>
        </div>
        <div class="pull-right" v-if="allowInout">
          <el-dropdown trigger="click" :show-timeout="150">
            <span class="el-dropdown-link cur-point mr_12">
              {{ $t('common.base.moreOperator') }}
              <i class="iconfont icon-more"></i>
            </span>

            <el-dropdown-menu slot="dropdown" class="dropdown-more">
             
              <el-dropdown-item v-if="isButtonDisplayed">
                <span
                  class="dropdown-item"
                  @click="exportPart(false)"
                  v-if="allowImportAndExport"
                  v-track="$track.formatParams('EXPORT', null, 'MORE_ACTIONS')"
                >{{ $t('common.base.export') }}</span>
              </el-dropdown-item>
              
              <el-dropdown-item v-if="isButtonDisplayed">
                <span
                  class="dropdown-item"
                  @click="exportPart(true)"
                  v-if="allowImportAndExport"
                  v-track="$track.formatParams('EXPORT_ALL', null, 'MORE_ACTIONS')"
                >{{ $t('common.base.exportAll') }}</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span
                  class="dropdown-item"
                  @click="mulHandle(selected)"
                  v-track="$track.formatParams('BATCH_HANDLE', null, 'MORE_ACTIONS')"
                >{{ $t('part.title1') }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- <div ref="BaseSelectionBarComponent" class="base-selection-wrapper">
      <div class="tooltipWrapper" v-show="selected.length">您已选择
        <el-tooltip class="item" content="可点击查看详情" placement="top">
          <span class="toolText" @click="multipleSelectionPanelShow = true">{{selected.length}}</span>
        </el-tooltip>
        条数据
        <span class="toolText" @click="toggleSelection()">清空</span>
      </div>
    </div> -->

    <div class="table-container">
      <el-table
        v-table-style
        :key="TableKey"
        v-loading="pageLoading"
        stripe
        border
        :data="page.list"
        ref="table"
        @select="handleSelection"
        @select-all="handleSelection"
        @header-dragend="headerDragend"
        header-row-class-name="base-table-header-v3"
        @sort-change="sortChange"
        @header-click="headerClick"
        :height="tableContainerHeight"
        class="bbx-normal-list-box"
      >
        <template slot="empty">
          <BaseListForNoData v-show="!pageLoading"></BaseListForNoData>
        </template>
        <el-table-column type="selection" fixed align='center' width="44"></el-table-column>

        <el-table-column
          v-for="column in columns.filter(item=>item.show)"
          :key="column.field"
          :prop="column.field"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :fixed="column.fixed"
          :show-overflow-tooltip="column.overflow"
          :sortable="column.sortable"
          :class-name="column.field"
        >
          <template slot-scope="scope">
            <template v-if="column.field == 'prosperName'">
              <template v-if="isOpenData && scope.row.prosperStaffId">
                <open-data type="userName" :openid="scope.row.prosperStaffId"></open-data>
              </template>
              <template v-else>{{ scope.row.prosperName }}</template>
            </template>
            <template v-else-if="column.field == 'approveName'">
              <template v-if="isOpenData && scope.row.approveStaffId">
                <open-data type="userName" :openid="scope.row.approveStaffId"></open-data>
              </template>
              <template v-else>{{ scope.row.approveName }}</template>
            </template>
            <template v-else-if="column.field == 'sourceTargetName'">
              <template v-if="isOpenData && scope.row.sourceTargetStaffId">
                <open-data type="userName" :openid="scope.row.sourceTargetStaffId"></open-data>
              </template>
              <template v-else>{{ scope.row.sourceTargetName }}</template>
            </template>
            <template v-else-if="column.field == 'targetName'">
              <template v-if="isOpenData && scope.row.targetStaffId">
                <open-data type="userName" :openid="scope.row.targetStaffId"></open-data>
              </template>
              <template v-else>{{ scope.row.targetName }}</template>
            </template>

            <template v-else-if="column.field == 'type'">
              <template>{{scope.row && scope.row.type}}</template>
            </template>
            <template v-else-if="column.field == 'propserTime'">
              <template>{{scope.row.propserTime}}</template>
            </template>
            <template v-else-if="column.field == 'name'">
              <template
                v-if="scope.row.sparepartRepertory"
              >{{scope.row.sparepartRepertory.sparepart&&scope.row.sparepartRepertory.sparepart.name}}</template>
            </template>
            <template v-else-if="column.field == 'serialNumber'">
              <template
                v-if="scope.row.sparepartRepertory"
              >{{scope.row.sparepartRepertory.sparepart&&scope.row.sparepartRepertory.sparepart.serialNumber}}</template>
            </template>
            <template v-else-if="column.field == 'sparepart.type'">
              <template
                v-if="scope.row.sparepartRepertory"
              >{{scope.row.sparepartRepertory.sparepart&&scope.row.sparepartRepertory.sparepart.type}}</template>
            </template>
            <template v-else-if="column.field == 'standard'">
              <template
                v-if="scope.row.sparepartRepertory"
              >{{scope.row.sparepartRepertory.sparepart&&scope.row.sparepartRepertory.sparepart.standard}}</template>
            </template>
            <template v-else-if="column.field == 'repertory'">
              <template
                v-if="scope.row.sparepartRepertory"
              >{{scope.row.sparepartRepertory.repertory&&scope.row.sparepartRepertory.repertory.name}}</template>
            </template>
            <template v-else-if="column.field == 'safetyStock'">
              <template
                v-if="scope.row.sparepartRepertory"
              >{{scope.row.sparepartRepertory.safetyStock || ''}}</template>
            </template>
            <template v-else-if="column.field == 'updateTime'">
              <el-tooltip
                placement="top"
                popper-class="common-tooltip"
                :disabled="scope.row.disabled"
              >
                <div slot="content" class="pre">{{scope.row.approveTimeArr}}</div>
                <div
                  @mouseover="getApproveTimeArr(scope.$index, scope.row.id)"
                >{{scope.row.updateTime || '' | fmt_date}}</div>
              </el-tooltip>
            </template>
            <template v-else-if="column.field == 'recordNo'">
              <el-tooltip
                placement="top"
                popper-class="common-tooltip"
                :disabled="scope.row.disabled"
              >
                <div slot="content" class="pre">{{scope.row.recordNoArr}}</div>
                <div
                  @mouseover="getRecordNoArr(scope.$index, scope.row.id)"
                >{{scope.row.recordNo || ''}}</div>
              </el-tooltip>
            </template>
            <template v-else-if="column.field ==='approveNo'">
              <!-- 所有状态都可以查看审批单 -->
              <!-- v-if="scope.row.approved || scope.row.cancel || scope.row.isreject" -->
              <a
                class="view-detail-btn el-tooltip"
                @click="column.clickFnc(scope.row)"
              >
                {{scope.row.approveNo}}
              </a>
              <!-- <div class="el-tooltip" v-else>{{scope.row.approveNo}}</div> -->
            </template>
            <template v-else-if="column.field == 'variation'">
              <!-- <template v-if="scope.row.variation == scope.row.solvedVariation">{{scope.row.variation}}</template> -->
              {{variationNum(scope.row.variation, scope.row.solvedVariation)}}
            </template>
            <template v-else-if="column.field == 'variation_'">{{scope.row.solvedVariation}}</template>
            <template v-else-if="column.field =='enable' && (scope.row.state === 'suspending' || scope.row.state === 'dealing')">
              <template v-if="scope.row.approveFlag && scope.row.approveInfo && scope.row.approveInfo.state !== 'success'">
                <el-button type="text" size class="no-padding"  @click="showPartDealDetail(scope.row)" v-if="isShowApprove(scope.row,'approve')"> {{ $t('common.base.approve') }}</el-button>
                <el-button type="text" size class="no-padding danger-color"  @click="onRevokeApproval(scope.row,true)"  v-if="isShowApprove(scope.row,'cancelApprove')"> {{ $t('common.task.button.offApprove')}}</el-button>
              </template>
              <template v-else>
              <el-button
                @click="showPartDealDetail(scope.row),tableTrackEventHandler('done')"
                type="text"
                size
                class="no-padding"
                v-if="scope.row.approved"
              >{{ $t('common.base.dealWith') }}</el-button>
              <el-button
                @click="partDealData['data']['approveNo']=scope.row.approveNo,backstockDialog=true,cancelType=0,tableTrackEventHandler('reject')"
                type="text"
                size
                class="no-padding danger-color"
                v-if="scope.row.isreject"
              >{{ $t('buttons.refuse') }}</el-button>
              <el-button
                @click="partDealData['data']['approveNo']=scope.row.approveNo,backstockDialog=true,cancelType=1,tableTrackEventHandler('recall'),backstock_type=scope.row.type"
                type="text"
                size
                class="no-padding"
                v-if="scope.row.cancel"
              >{{ $t('common.base.revoke') }}</el-button>
              </template>
            </template>
            <!-- 操作 -->
            <template v-else-if="column.field == 'enable2222'" slot-scope="scope">
              <template v-if="scope.row.type !== '调拨'">
                <template v-if="scope.row.state == 'solved' && scope.row.type !='分配'">
                  <el-button
                    v-if="scope.row.type === '申领'"
                    type="text"
                    size
                    class="no-padding"
                    style="color:#333;cursor: text;"
                    key="0"
                  >{{ $t('common.base.usualStatus.outStorage') }}</el-button>
                  <el-button
                    v-else-if="scope.row.type === '退回'"
                    type="text"
                    size
                    class="no-padding"
                    style="color:#333;cursor: text;"
                    key="0"
                  >{{ $t('common.base.usualStatus.inStorage') }}</el-button>
                  <el-button
                    v-else
                    type="text"
                    size
                    class="no-padding"
                    style="color:#333;cursor: text;"
                    key="0"
                  >{{ $t('common.form.preview.stock.status.solved') }}</el-button>
                </template>
                <template v-if="scope.row.state == 'cancel' && scope.row.type !='分配'">
                  <el-button
                    type="text"
                    size
                    class="no-padding"
                    style="color:#333;cursor: text;"
                    key="1"
                  >{{$t('common.task.type.refused')}}</el-button>
                </template>

                <template
                  v-if="allowInout && scope.row.state == 'suspending' && scope.row.type !='分配'"
                >
                  <template v-if="scope.row.type == '申领' ">
                    <el-button
                      @click="outstock(scope.row);tableTrackEventHandler('stock-out')"
                      type="text"
                      size
                      class="no-padding"
                      key="2"
                    >{{ $t('common.base.dealWidthOutStock') }}</el-button>
                  </template>
                  <template v-if="scope.row.type == '退回' || scope.row.type == '调拨'">
                    <el-button
                      @click="instock(scope.row)"
                      type="text"
                      size
                      class="no-padding"
                      key="3"
                    >{{$t('common.base.dealWidthInStock')}}</el-button>
                  </template>
                  <template>
                    <el-button
                      @click="backstock(scope.row);tableTrackEventHandler('reject')"
                      type="text"
                      size
                      class="no-padding"
                      key="4"
                    >{{ $t('common.base.refuse') }}</el-button>
                  </template>
                </template>
                <!-- 分配 -->
                <template v-if="scope.row.state == 'suspending' && scope.row.type =='分配'">
                  <el-tooltip class="item" effect="dark" content="当前状态为个人库未接受状态" placement="bottom">
                    <el-button
                      type="text"
                      size
                      class="no-padding"
                      style="color:#333;cursor: text;"
                      key="5"
                    >{{ $t('part.text34') }}</el-button>
                  </el-tooltip>
                  <el-button
                    @click="reStockOpenDialog(scope.row)"
                    type="text"
                    size
                    class="no-padding"
                    key="6"
                  >{{ $t('common.base.withdraw') }}</el-button>
                </template>
                <template v-if="scope.row.state == 'solved' && scope.row.type =='分配'">
                  <el-button
                    type="text"
                    size
                    class="no-padding"
                    style="color:#333;cursor: text;"
                    key="7"
                  >{{ $t('common.base.usualStatus.inStorage') }}</el-button>
                </template>
                <template
                  v-if="scope.row.state == 'revoked' && (scope.row.type =='分配' || scope.row.type =='申领')"
                >
                  <el-button
                    type="text"
                    size
                    class="no-padding"
                    style="color:#333;cursor: text;"
                    key="8"
                  >{{$t('common.form.preview.stock.status.revoked')}}</el-button>
                </template>
                <template v-if="scope.row.state == 'rejected' && scope.row.type =='分配'">
                  <el-button
                    type="text"
                    size
                    class="no-padding"
                    style="color:#333;cursor: text;"
                    key="9"
                  >{{ $t('part.text35') }}</el-button>
                </template>
              </template>
              <!-- 调拨 -->
              <template v-if="scope.row.type === '调拨'">
                <template v-if="scope.row.state === 'suspending'">
                  <template v-if="scope.row.isOriginalRepertoryManager">
                    <el-button type="text" @click="openCancelTransferDialog(scope.row)">{{ $t('common.base.withdraw') }}</el-button>
                  </template>
                  <template v-if="scope.row.isTargetRepertoryManager">
                    <el-button type="text" @click="openTransferDialog(scope.row, 0)">{{$t('common.paas.buttons.refuse')}}</el-button>
                    <el-button type="text" @click="openTransferDialog(scope.row, 1)">{{ $t('part.text25') }}</el-button>
                  </template>
                </template>
                <template v-if="scope.row.state === 'revoked'">
                  <span style="color:#333;cursor: text;">{{ $t('part.text36') }}</span>
                </template>
                <template v-if="scope.row.state === 'rejected'">
                  <span style="color:#333;cursor: text;">{{ $t('part.text37') }}</span>
                </template>
                <template v-if="scope.row.state === 'solved'">
                  <span style="color:#333;cursor: text;">{{ $t('part.text38') }}</span>
                </template>
                <!--<button @click="logRow(scope.row)">test</button>-->
              </template>
            </template>
            <template v-else-if="column.field == 'state'">
              <div :class='`state-text state-${scope.row[column.field]} table-blacklist`'>{{scope.row[column.field] | state}}</div>
            </template>
            <template v-else-if="column.field == 'showNum'">{{Number(scope.row[column.field])}}</template>
            <template
              v-else-if="column.field === 'applyCount'"
            >{{`${scope.row['unsolved'] || 0}/${scope.row['solved'] || 0}`}}</template>
            <template v-else-if="column.field == 'sparepartIds'">
              <div>
                <span v-if="scope.row.showState==='close'">
                  <span v-for="(item,index) in scope.row[column.field].slice(0,3)" :key='index'><img v-if="scope.row.targetId[index]==='true'" style="display:inline-block;width:13px;" :src="partGouImage" alt="" :title="$t('part.text39')"> {{item}}<br></span>
                </span>
                <span v-else>
                  <span v-for="(item,index) in scope.row[column.field]" :key='index'><img v-if="scope.row.targetId[index]==='true'" style="display:inline-block;width:13px;" :src="partGouImage" alt="" :title="$t('part.text39')"> {{item}}<br></span>
                </span>
                <span v-if="scope.row[column.field].length>3 && scope.row.showState==='close'">{{$t('task.list.howMany', {ids:'', num:scope.row[column.field].length})}}</span>
                <i v-if="scope.row.showState" :class="scope.row.showState==='close'?'el-icon-arrow-down showMore':'el-icon-arrow-up showMore'" @click="showMore(scope.$index)"></i>
              </div>
            </template>
            <template v-else-if="column.field == 'remark'">
              <el-popover
                placement="top"
                width="300"
                trigger="hover"
                @show='remarkShow(scope.row.approveNo,scope.$index)'
              >
                <span v-html='scope.row.remarkDetail'></span>
                <span slot="reference" style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;display:inline-block;min-width:50px;min-height:16px;'>{{scope.row.remark}}</span>
              </el-popover>
            </template>
            
            <template v-else>{{scope.row[column.field]}}</template>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div ref="tableFooterContainer" class="table-footer bbx-normal-table-footer">
      <div class="list-info">
        <i18n path="common.base.table.totalCount">
          <span place="count" class="level-padding">{{page.total || 0}}</span>
        </i18n>
        <i18n path="common.base.table.selectedNth">
          <span
            place="count"
            class="base-table-selected-count"
            @click="multipleSelectionPanelShow = true"
          >{{selected.length}}</span>
        </i18n>
        <template v-if="selected&&selected.length>0">
          <span class="base-table-selected-count" @click="toggleSelection()">{{ $t('common.base.clear') }}</span>
        </template>
      </div>
      <el-pagination
        class="customer-table-pagination"
        background
        @current-change="jump"
        @size-change="pageSizeChange"
        :page-sizes="defaultTableData.defaultPageSizes"
        :page-size="model.pageSize"
        :current-page="model.pageNum"
        layout="prev, pager, next, sizes, jumper"
        :total="page.total"
      ></el-pagination>
    </div>

    <div class="page-panel">
      <el-dialog :title="$t('part.text5')" :visible.sync="instockDialog" width="600px">
        <!-- <part-instock-form
          v-if="instockDialog"
          ref="instockForm"
          :formdata="formdata"
          :repertory="repertory"
          :sparepartConfig="sparepartConfig"
          :initData="initData"
        ></part-instock-form>-->

        <div slot="footer" class="dialog-footer">
          <el-button type="ghost" @click="instockDialog = false">{{ $t('common.base.cancel') }}</el-button>
          <el-button type="primary" @click="instockSave" :disabled="pending">{{ $t('common.base.makeSure') }}</el-button>
        </div>
      </el-dialog>

      <!-- 单个办理 -->
      <single-handle-dialog
        :title="partDealTitle"
        :formdata="partDealData"
        :target-list="targetList"
        :dialog-visible="partDealDialog"
        @updateDetail="updateDetail"
        @handleRevoke="cancelType=1,backstockDialog = true,backstock_type=partDealData.data.type"
        @handleReject="cancelType=0,backstockDialog = true"
        @success="loadData(), partDealDialog=false"
        @close="partDealDialog=false"
      ></single-handle-dialog>

      <!-- 批量办理 -->
      <batch-handle-dialog
        :formdata="formdata"
        :dialog-visible="mulHandleDialog"
        @success="loadData(true), mulHandleDialog=false"
        @close="mulHandleDialog=false"
      ></batch-handle-dialog>

      <el-dialog
        :title="toastTitle"
        :modal="false"
        :visible.sync="backstockDialog"
        width="600px"
      >
        <p v-if="cancelType===1">{{isCancelApprove ? t('part.tips92', {type:backstock_type}) : t('part.tips68', {type:backstock_type})}}</p>
        <el-form label-position="top" :model="rejectForm" :rules="rejectRules" ref="rejectForm" class="mar-b-15">
          <el-form-item v-if="cancelType===0" prop="reason">
            <el-input
              type="textarea"
              resize="none"
              maxlength="500"
              :autosize="{ minRows: 2, maxRows: 6 }"
              :placeholder="t('part.tips69', {num:500})"
              v-model="rejectForm.reason"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="cancelType===1" prop="reasons">
            <el-input
              type="textarea"
              resize="none"
              maxlength="500"
              :autosize="{ minRows: 2, maxRows: 6 }"
              :placeholder="isCancelApprove ? t('part.tips91', {num:500}) : t('part.tips70', {num:500})"
              v-model="rejectForm.reasons"
            ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="ghost" @click="backstockDialog = false,isCancelApprove = false, rest_rejectForm()">{{ $t('common.base.cancel') }}</el-button>
          <el-button
            v-if="cancelType===0"
            type="primary"
            @click="partDealDataCancel(partDealData.data.approveNo)"
            :loading="pending"
            :disabled="pending"
          >{{ $t('common.base.makeSure') }}</el-button>
          <el-button
            v-if="cancelType===1"
            type="primary"
            @click="partDealDataReset(partDealData.data.approveNo)"
            :loading="pending"
            :disabled="pending"
          >{{ $t('common.base.makeSure') }}</el-button>
        </div>
      </el-dialog>

      <el-dialog :title="$t('part.text4')" :visible.sync="outstockDialog" width="900px">
        <part-outstock-form
          v-if="outstockDialog"
          ref="outstockForm"
          :formdata="formdata"
          :sparepart-config="sparepartConfig"
          :init-data="initData"
        ></part-outstock-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="ghost" @click="outstockDialog = false">{{ $t('common.base.cancel') }}</el-button>
          <el-button type="primary" @click="outstockSave" :disabled="pending">{{ $t('common.base.makeSure') }}</el-button>
        </div>
      </el-dialog>

      <el-dialog :title="$t('part.text40')" :visible.sync="outstockBatchDialog" width="900px">
        <part-applybatchout-form
          v-if="outstockBatchDialog"
          ref="outstockBatchForm"
          :formdata="formdata"
          :repertory="repertory"
          :sparepart-config="sparepartConfig"
        ></part-applybatchout-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="ghost" @click="outstockBatchDialog = false">{{ $t('common.base.cancel') }}</el-button>
          <el-button type="primary" @click="outstockBatchSave" :disabled="pending">{{ $t('common.base.makeSure') }}</el-button>
        </div>
      </el-dialog>

      <el-dialog :title="$t('part.text40')" :visible.sync="instockBatchDialog" width="900px">
        <part-applybatchin-form
          v-if="instockBatchDialog"
          ref="instockBatchForm"
          :formdata="formdata"
          :repertory="repertory"
          :sparepart-config="sparepartConfig"
        ></part-applybatchin-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="ghost" @click="instockBatchDialog = false">{{ $t('common.base.cancel') }}</el-button>
          <el-button type="primary" @click="instockBatchSave" :disabled="pending">{{ $t('common.base.makeSure') }}</el-button>
        </div>
      </el-dialog>

      <el-dialog :title="$t('part.text57')" :visible.sync="reStockDialog" width="600px">
        <part-re-stock-form v-if="reStockDialog" ref="reStockForm" :formdata="formdata"></part-re-stock-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="ghost" @click="reStockDialog = false">{{ $t('common.base.cancel') }}</el-button>
          <el-button type="primary" @click="reStock" :disabled="pending">{{ $t('common.base.makeSure') }}</el-button>
        </div>
      </el-dialog>

      <el-dialog :title="$t('part.text58')" :visible.sync="cancelTransferDialog" width="600px">
        <part-cancel-transfer-form
          v-if="cancelTransferDialog"
          ref="cancelTransferForm"
          :formdata="formdata"
        ></part-cancel-transfer-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="ghost" @click="cancelTransferDialog = false">{{ $t('common.base.cancel') }}</el-button>
          <el-button type="primary" @click="cancelTransfer" :disabled="pending">{{ $t('common.base.makeSure') }}</el-button>
        </div>
      </el-dialog>

      <el-dialog :title="$t('part.text59')" :visible.sync="transferDialog" width="600px">
        <part-transfer-form v-if="transferDialog" ref="transferForm" :formdata="formdata"></part-transfer-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="ghost" @click="transferDialog = false">{{ $t('common.base.cancel') }}</el-button>
          <el-button type="primary" @click="transfer" :disabled="pending">{{ $t('common.base.makeSure') }}</el-button>
        </div>
      </el-dialog>

      <base-export
        ref="exportPanel"
        v-if="allowImportAndExport"
        :columns="exportColumns"
        :validate="checkExportCount"
        :action="partRepertoryAllpyExport"
        :method="'post'"
        :need-obj-req='true'
        :list-page="page"
      ></base-export>
    </div>

    <base-panel :show.sync="multipleSelectionPanelShow" width="420px">
      <h3 slot="title" style="display: flex;justify-content: space-between;align-items: center">
        <span>{{$t('common.base.exportModal.selectedData', {count:selected.length})}}</span>
        <span
          v-if="selected.length"
          class="part-panel-btn"
          @click="toggleSelection()"
          :title="$t('common.base.tip.clearChoseDataTip')"
          data-placement="right"
          v-tooltip
        ></span>
      </h3>

      <div class="part-selected-panel">
        <div class="part-selected-tip" v-if="!selected.length">
          <img :src="noDataImage" />
          <p>{{ $t('common.base.tip.noSelectedDataFromList') }}</p>
        </div>
        <template v-else>
          <div class="part-selected-list">
            <div class="part-selected-row part-selected-head">
              <span class="part-selected-sn">{{ $t('common.part.category') }}</span>
              <span class="part-selected-name">{{ $t('common.label.sponsor') }}</span>
              <span class="part-selected-name">{{ $t('common.label.launchTime') }}</span>
            </div>
            <div class="part-selected-row" v-for="c in selected" :key="c.id">
              <span class="part-selected-sn">{{c.type}}</span>
              <span class="part-selected-name">{{c.prosperName}}</span>
              <span class="part-selected-name">{{c.prosperTime}}</span>
              <button type="button" class="part-selected-delete" @click="cancelSelectPart(c)">
                <i class="iconfont icon-fe-close"></i>
              </button>
            </div>
          </div>
        </template>
      </div>
    </base-panel>
  </div>
</template>

<script>
// pageDes 办理出入库列表
import { isOpenData, openAccurateTab } from '@src/util/platform';
import _ from 'lodash';
import Page from '@src/model/Page';
import { safeNewDate } from '@src/util/time';
import PartBackStockForm from './form/PartBackStockForm.vue';
import PartOutStockForm from './form/PartApplyOutStockForm.vue';
import PartInStockForm from './form/PartApplyInStockForm.vue';
import PartApplyFormBatchOut from './form/PartApplyFormBatchOut.vue';
import PartApplyFormBatchIn from './form/PartApplyFormBatchIn.vue';
import PartReStockForm from './form/PartReStockForm.vue';
import PartCancelTransferForm from './form/PartCancelTransferForm.vue';
import PartTransferForm from './form/PartTransferForm.vue';

import BatchHandleDialog from './components/batchHandleDialog';
import SingleHandleDialog from './components/singleHandleDialog';

import { formatDate, objectDateToTimestamp, nearDateBy, dayTimeEnd } from 'pub-bbx-utils';
import AuthUtil from '@src/util/auth';
import { getOssUrl } from '@src/util/assets'
const partGouImage = getOssUrl('/partGou.png')
import {
  rejectBatch,
  revokeBatch,
  getRelationListByApproveNo,
  getProgress,
  getRelationsByApproveNos
} from '@src/api/SparePart';
import StorageUtil from '@src/util/storageUtil';
import qs from '@src/util/querystring';
import Platform from '@src/util/platform.ts'
import { sessionStorageGet, sessionStorageRemove } from '@src/util/storageV2';
import { pageSparepartApply } from 'pub-bbx-global/pageType/dist'
/* mixin */
import ThemeMixin from '@src/mixins/themeMixin/index.ts'
import BaseSearchDrawer from 'packages/BaseSearchDrawer/BaseSearchDrawer.vue';
import { checkButtonDisplayed } from '@src/util/dom';
import { VersionControlSparePartMixin } from '@src/mixins/versionControlMixin'

import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'

/* export & import */
import { partRepertoryAllpyExport } from '@src/api/Export';
import { defaultTableData } from '@src/util/table'
import TableForStashWidth from '@src/mixins/tableForStashWidth/index.js';
import { t } from '@src/locales'

let allPerson = [];

const STORAGE_COLNUM_KEY = 'shb_repe_apply_list_column';
const STORAGE_PAGESIZE_KEY = 'repe_apply_list_pagesize';
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'part-apply-view',
  inject: ['initData'],
  mixins: [
    ThemeMixin, 
    TableForStashWidth,
    VersionControlSparePartMixin
  ],
  data() {
    let pageSize = StorageUtil.get(STORAGE_PAGESIZE_KEY) || 10;

    let originModel = {
      keyWord: '',
      type: [],
      // enable: "",
      pageNum: 1,
      pageSize,
      sparepartType: '',
      targetIds: [],
      sourceIds: [],
      state: ['suspending', 'dealing']
    };

    return {
      defaultTableData,
      partGouImage,
      noDataImage,
      // 备件名称数量多了，操作和复选高度计算失误。重置key值，让table重新渲染
      TableKey:0,
      isButtonDisplayed: checkButtonDisplayed(),
      isOpenData,
      selectColumnState: 'partV2_repertoryApplyList',
      stateArr: [
        { value: '', label: `${t('common.label.status')}：${t('common.base.all')}`, key: 'all' },
        { value: 'suspending', label: t('common.form.preview.stock.status.suspending'), key: 'suspending' },
        { value: 'dealing', label: t('common.form.preview.stock.status.dealing'), key: 'dealing' },
        { value: 'solved', label: t('common.form.preview.stock.status.solved'), key: 'solved' },
        { value: 'rejected', label: t('common.task.type.refused'), key: 'rejected' },
        { value: 'cancel', label: t('common.task.type.offed'), key: 'cancel' },
        { value: 'revoked', label: t('common.form.preview.stock.status.revoked'), key: 'revoked' }
      ],
      selectedLimit: 500,
      auths: {},
      columns: this.buildColumns(),
      exportColumns:this.builcExportColumns(), // 先不导出备注，后面后台实现删除，用回 columns
      isExpand: false,
      pending: false,
      userName: '',
      userId: '',

      types: [],
      userApply: {
        prosperId: '',
        loading: false,
        options: []
      },
      userApprove: {
        approveId: '',
        loading: false,
        options: []
      },
      sparepart: {
        sparepartType: '',
        sparepartName: '',
        loading: false,
        options: []
      },

      originModel,
      multipleSelectionPanelShow: false,
      model: _.assign({}, originModel),

      page: new Page(),
      selected: [],
      backstockDialog: false,
      backstock_type: '',
      instockDialog: false,
      outstockDialog: false,
      outstockBatchDialog: false,
      instockBatchDialog: false,
      cancelTransferDialog: false,
      transferDialog: false,
      reStockDialog: false,
      mulHandleDialog:false,
      partDealDialog: false, // 新处理弹窗显隐判断条件
      partDealData: {
        data: {},
        arr: [],
        progress:[]
      }, // 新处理弹窗需要的数据
      partDealTitle:'', // 新处理弹窗标题
      repertory: [], // 所有原始仓库
      repertories: [], // 所有仓库
      sourceType: '备件库',
      targetType: '备件库',
      repertorySelected: '',
      sparepartConfig: {},
      repertoryName: '',
      state: '',
      pickerOptions2: {
        shortcuts: [
          {
            text: t('common.base.aboutTime.nearlyWeek'),
            onClick(picker) {
              const end = safeNewDate();
              const start = safeNewDate();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: t('common.base.aboutTime.nearlyMonth'),
            onClick(picker) {
              const end = safeNewDate();
              const start = safeNewDate();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: t('common.base.aboutTime.lastThreeMonths'),
            onClick(picker) {
              const end = safeNewDate();
              const start = safeNewDate();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      timeValue: [],
      updateTimeValue: [],
      isPersonalRepertory: false,
      rejectForm: {
        reason: '',
        reasons: ''
      },
      rejectRules: {
        reason: [
          { required: true, message: t('part.tips71'), trigger: 'change' }
        ]
      },
      cancelType: 0, // 0 拒绝 1 撤销
      partDealKey:1,
      formdata:[],
      mulHandleKey:1,

      targetList:[], // 目标仓库
      onceLoadApplyDetail: false,
      partRepertoryAllpyExport,
      pageLoading:true,
      tableContainerHeight:'440px',
      // 办理人下拉分页
      UserApproveloadMoreOptions: {
        disabled: false,
        callback: this.ApproveLoadMore,
        distance: 10,
        pageNum: 1,
        keyword: '',
      },
      // 发起人下拉分页
      UserApplyloadMoreOptions: {
        disabled: false,
        callback: this.ApplyLoadMore,
        distance: 10,
        pageNum: 1,
        keyword: '',
      },
      infiniteData:{
        distance: 0,
        disabled: false,
        delay: 500,
        pageNum: 1,
      },
      isCancelApprove: false,
    };
  },
  computed: {
    toastTitle() {
      if(this.isCancelApprove) return t('common.task.button.offApprove')
      return this.cancelType == 0 ? t('common.paas.buttons.refuse') : t('common.base.revoke');
    },
    /** 当前登陆用户 */
    loginUser(){
      return window?.parent?.loginUser || {}
    },
    tenantType() {
      return this.initData.tenantType;
    },
    allowInout() {
      return AuthUtil.hasAuth(this.auths, 'VIP_SPAREPART_INOUT');
    },
    // 是否允许导入导出
    allowImportAndExport() {
      return AuthUtil.hasAuth(this.auths, 'STOCK_IN_OUT_DEAL_EXPORT');
    },
    typeArr() {
      return this.isPersonalRepertory
        ? [
          { value: '出库', label: t('common.form.preview.sparepart.outStock'), key: '0' },
          { value: '入库', label: t('common.form.preview.sparepart.inStock'), key: '1' },
          { value: '调拨', label: t('common.pageTitle.pageAllocatestockDetail'), key: '2' },
          { value: '分配', label: t('common.event.actionStatus.allot'), key: '3' },
          { value: '申领', label: t('part.tips72'), key: '4' },
          { value: '退回', label: t('common.paas.buttons.back'), key: '5' }
        ]
        : [
          { value: '出库', label: t('common.form.preview.sparepart.outStock'), key: '0' },
          { value: '入库', label: t('common.form.preview.sparepart.inStock'), key: '1' },
          // { value: '调拨', label: '调拨', key: '2' }
        ];
    },
    loadApplyDetail() {
      let query = qs.parse(window.location.search);
      return query.action == 'applyDetail';
    },
    isDingDingDesktop() {
      return Platform.isDingDingDesktop()
    },
    repertory_1(){
      if (this.targetType === '备件库') {
        return this.repertories
      } else if (this.targetType === '个人备件库'){
        return this.repertory
      }
      return []
    },
    repertory_2(){
      if (this.sourceType === '备件库') {
        return this.repertories
      } else if (this.sourceType === '个人备件库'){
        return this.repertory
      }
      return []
    },
  },
  watch: {
    backstockDialog(newVal) {
      this.rest_rejectForm();
    }
  },
  filters: {
    state(s) {
      if (s === 'solved') return t('common.form.preview.stock.status.solved');
      if (s === 'suspending') return t('common.form.preview.stock.status.suspending');
      if (s === 'dealing') return t('common.form.preview.stock.status.dealing');
      if (s === 'cancel') return t('common.task.type.offed');
      if (s === 'rejected') return t('common.task.type.refused');
      if (s === 'revoked') return t('common.form.preview.stock.status.revoked');
      return s;
    }
  },
  methods: {
    /** 撤回审批 */
    onRevokeApproval(row, flag) {
      // 标识是否是撤回审批
      this.isCancelApprove = flag;
      this.partDealData.data.approveNo = row.approveNo;
      this.backstockDialog = true;
      this.cancelType = 1;
      this.backstock_type= row.type;
    },
    /** 是否显示审批或拒绝审批*/ 
    isShowApprove(row, type){
      // 显示审批（当前审批节点的审批人）
      if(type == 'approve') {
        if(row.approveInfo?.approvers){
        const approvers = JSON.parse(row.approveInfo.approvers) || [];
        return approvers.some(item=> item.userId == this.loginUser.userId )
        }else {
          return false
        }
      }
      // 显示撤销审批（审批发起人）
      return this.loginUser.userId == row.approveInfo.proposer
    },
    // 关闭高级搜索弹框
    closeDrawer(){
      this.isExpand = false;
    },
    // 获取目标仓库
    // getTargetList(){
    //   return this.$http.get('/partV2/repertory/listForTeam').then(result => {
    //     this.targetList = result || [];
    //   })
    // },
    // 批量办理
    mulHandle(value){
      if(value.length === 0){
        this.$platform.alert(t('part.tips73', {num:1}));
        return;
      }
      if(value.length > 100){
        this.$platform.alert(t('part.tips74', {num:100}));
        return;
      }
      // 过滤高级审批
      const approveValue = value.filter(item=>item?.approveFlag && item?.approveInfo?.state !== 'success');
      if(approveValue.length) return this.$platform.alert(t('part.tips75', { num: approveValue.length }));

      // 只能选择可办理的数据
      const cannotApprove = value.filter(item=>!item.approved);
      if(cannotApprove.length > 0){
        this.$platform.alert(t('part.tips75', {num:cannotApprove.length}));
        return;
      }
      // 只能选择状态为"待办理"，申请类别为 申领、调拨、退回、分配 的数据
      const allSuspending = value.every(item=>item.state === 'suspending' || item.state === 'dealing');
      const allSL = value.every(item=>item.type === '申领');
      const allDB = value.every(item=>item.type === '调拨');
      const allTH = value.every(item=>item.type === '退回');
      const allFP = value.every(item=>item.type === '分配');
      if(!allSuspending || (!allSL && !allDB && !allTH && !allFP)){
        this.$platform.alert(t('part.tips76'));
        return;
      }
      const params = {
        ids:value.map(item=>item.id),
        type:value[0].type
      }
      getRelationsByApproveNos(params).then(res=>{
        if(!res.success){
          this.$message({
            showClose: true,
            message: res.message || 'http error',
            type: 'error'
          });
          return
        }
        const result = res.result.data;
        this.formdata = result.map(item=>{
          return {
            id:item.id,
            solvedVariation:item.solvedVariation,
            variation:item.variation,
            targetName:item.targetName,
            prosperName:item.prosperName,
            approveNo:item.approveNo,
            type:item.type,
            name:item.sparepart.name,
            serialNumber:item.sparepart.serialNumber,
            standard:item.sparepart.standard,
            unit:item.sparepart.unit,
            sourceName:item.sourceName,
            sType:item.sparepart.type,
            propserTime:this.formmatTime(item.propserTime),
            repertoryCount:item.repertoryCount,
            handleNum:null,
            checked:false,
            max:'',
            propserName: item.propserName,
          }
        });
        this.mulHandleKey++;
        this.mulHandleDialog = true;
      });
    },
    formmatTime(time){
      const t = safeNewDate(time);
      const year = t.getFullYear();
      const month = (t.getMonth() + 1).toString().padStart(2, '0');
      const day = (t.getDate()).toString().padStart(2, '0');
      const hour = (t.getHours()).toString().padStart(2, '0');
      const minute = (t.getMinutes()).toString().padStart(2, '0');
      const second = (t.getSeconds()).toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    // 显示详细备注
    remarkShow(approveNo, index){
      if(!this.page.list[index].remarkReq){
        getProgress({approveNo}).then(res=>{
          if(res.success){
            const result = res.result.data;
            this.page.list[index].remarkReq = true;
            let content = '';
            let applyRemark = '';
            const applyItem = result.find(item=>item.state === 0);
            if(applyItem){
              applyRemark = `${t('common.form.preview.relatedPart.approver')}：${applyItem.remark}`;
            }
            let handleRemark = '';
            const handleItems = result.filter(item=>item.state !== 0);
            if(handleItems.length > 0){
              handleRemark = `${t('common.form.preview.stock.sparepartStockDisplayName.approveName')}：`;
              handleItems.forEach(item=>{
                handleRemark += `${item.remark}；`;
              });
              handleRemark = handleRemark.slice(0, -1);
            }
            if(handleRemark && applyRemark){
              content = `${applyRemark}<br>------------------------------------------<br>${handleRemark}`;
            }else if(!applyRemark){
              content = handleRemark;
            }else if(!handleRemark){
              content = applyRemark;
            }
            this.page.list[index].remarkDetail = content;
          }else{
            this.$platform.toast(res.message, 'error');
          }
        }).catch(err=>{});
      }
    },
    // 显示剩余备件信息
    showMore(index){
      if(this.page.list[index].showState === 'close'){
        this.page.list[index].showState = 'open';
      }else{
        this.page.list[index].showState = 'close';
      }
      this.TableKey = Date.now();
    },
    rest_rejectForm() {
      if (this.$refs['rejectForm']) {
        this.$refs['rejectForm'].resetFields();
      }
    },
    /** 检测导出条数 */
    checkExportCount(ids, max) {
      let exportAll = !ids || !ids.length;
      return exportAll && this.page.total > max
        ? t('common.base.tip.exportLimit', {max:5000})
        : null;
    },
    exportPart(exportAll = false) {
      if (!this.allowImportAndExport || !this.allowInout) return;

      let ids = [];
      let fileName = `${formatDate(
        safeNewDate(),
        'YYYY-MM-DD'
      )}备件办理出入库数据.xlsx`;

      if (!exportAll) {
        if (this.selected.length == 0)
          return this.$platform.alert(t('common.base.tip.exportUnChooseTip'));
        ids = this.selected.map(item => item.id);
      }

      this.$refs.exportPanel.open(ids, fileName);
    },
    cancelSelectPart(part) {
      if (!part || !part.id) return;
      this.selected = this.selected.filter(ms => ms.id !== part.id);
      this.toggleSelection([part]);
    },
    toggleSelection(rows) {
      let isNotOnCurrentPage = false;
      let row = undefined;

      if (rows) {
        for (let i = 0; i < rows.length; i++) {
          row = rows[i];
          isNotOnCurrentPage = this.page.list.every(item => {
            return item.id !== row.id;
          });
          if (isNotOnCurrentPage) return;
        }
        rows.forEach(row => {
          this.$refs.table.toggleRowSelection(row);
        });
      } else {
        this.$refs.table.clearSelection();
        this.selected = [];
      }
    },

    getApproveTimeArr(i, id) {
      if (this.page.list[i].isApproveTimeArr) return;

      this.$set(this.page.list[i], 'disabled', false);
      this.$set(this.page.list[i], 'approveTimeArr', t('common.base.loading'));
      try {
        this.$http
          .post('/partV2/repertory/diposal/time', { approveId: id })
          .then(res => {
            this.$set(this.page.list[i], 'approveTimeArr', res.data.join('\n'));
            this.$set(this.page.list[i], 'isApproveTimeArr', true);
            if (res.data.length == 0)
              this.$set(this.page.list[i], 'disabled', true);
          });
      } catch (error) {
        console.log(error);
      }
    },
    getRecordNoArr(i, id) {
      if (this.page.list[i].isRecordNoArr) return;
      this.$set(this.page.list[i], 'disabled', false);
      this.$set(this.page.list[i], 'recordNoArr', t('common.base.loading'));
      try {
        this.$http
          .post('/partV2/repertory/diposal/recordNo', { approveId: id })
          .then(res => {
            this.$set(this.page.list[i], 'recordNoArr', res.data.join('\n'));
            this.$set(this.page.list[i], 'isRecordNoArr', true);
            if (res.data.length == 0)
              this.$set(this.page.list[i], 'disabled', true);
          });
      } catch (error) {
        console.log(error, 'getRecordNoArr');
      }
    },
    chooseColnum(column, index) {
      this.trackEventHandler('selectColumn');
      column.show = !column.show;
      this.saveColumnStatusToStorage()
      // let data = {};
      // this.columns.forEach(item => (data[item.field] = item.show));
      // StorageUtil.save(STORAGE_COLNUM_KEY, data);
    },
    seeTime() {
      const [prosperTimeStart, prosperTimeEnd] = this.timeValue || [];
      this.model.prosperTimeStart = prosperTimeStart;
      this.model.prosperTimeEnd = prosperTimeEnd
    },
    seeUpdateTime() {
      const [approveTimeStart, approveTimeEnd] = this.updateTimeValue || [];
      this.model.approveTimeStart = approveTimeStart;
      this.model.approveTimeEnd = approveTimeEnd
    },
    openDetail(row) {
      // this.$platform.openTab({
      //   id: `partV2_detail_${row.id}`,
      //   url: `/partV2/detail?id=${row.id}`,
      //   title: '备件品类详情'
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PagePartV2Detail,
        key: row.id,
        params: `id=${row.id}`,
      })
    },
    exportData() {
      this.$platform.alert('export');
    },
    // select part
    handleSelection(selection) {
      let tv = this.computeSelection(selection);
      // 在需要限制最多选择500个备件时，取消function内部全部注释即可
      let original = this.selected.filter(ms =>
        this.page.list.some(cs => cs.id === ms.id)
      );
      let unSelected = this.page.list.filter(c =>
        original.every(oc => oc.id !== c.id)
      );

      if (tv.length > this.selectedLimit) {
        this.$nextTick(() => {
          original.length > 0
            ? unSelected.forEach(row => {
              this.$refs.table.toggleRowSelection(row, false);
            })
            : this.$refs.table.clearSelection();
        });
        return this.$platform.alert(t('common.base.tip.maxDataCanChooseTips', {data1:this.selectedLimit}));
      }
      this.selected = tv;

      // this.$refs.baseSelectionBar?.openTooltip();
      this.$nextTick(()=>{
        this.knowTableContainerHeight()
      })
    },
    computeSelection(selection) {
      let tv = [];
      tv = this.selected.filter(ms =>
        this.page.list.every(c => c.id !== ms.id)
      );
      tv = _.uniqWith([...tv, ...selection], _.isEqual);
      return tv;
    },
    matchSelected() {
      if (!this.selected.length) return;
      const selected = this.page.list.filter(c => {
        if (this.selected.some(sc => sc.id === c.id)) {
          this.selected = this.selected.filter(sc => sc.id !== c.id);
          this.selected.push(c);
          return c;
        }
      }) || [];

      this.$nextTick(() => {
        this.toggleSelection(selected);
      });
    },
    create() {
      // this.$platform.openTab({
      //   id: 'partV2_create',
      //   url: '/partV2/create',
      //   title: '创建备件品类'
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCreatePartV2
      })
    },
    initialize() {
      Promise.all([
        this.fetchAllRepertory(), // 所有仓库
        this.loadData(),
        this.fecthSparepartConfig(),
        this.fetchUserApply(), // 所有管理人员
        this.fetchUserApprove(), // 所有管理人员
        this.fetchSparepart(),
        this.GetRepertory()
      ])
        .then(res => {
          let allRepertory = res[0];
          let list = res[1];
          allPerson = this.userApply.options;

          this.targetList = res[0].filter(item=>{
            if(Array.isArray(item.manager)){
              const exist = item.manager.find(mItem=>mItem.userId === this.initData.userId);
              if(exist) return item;
            }
          });
          this.findFastPageData();
          window.addEventListener('message', (event)=> {
            const {action, data} = event.data;
            if (action == 'shb.frame.fasterPage'){
              const {data:parseData, type} = data;
              if(type == `bbx-faster-${pageSparepartApply.type}`){
                this.findFastPageData(parseData);
              }
            }
          });

          this.page.list = list?.map(item => {
            let tv = allRepertory.filter(r => r.id === item.targetId);
            if (item.type === '调拨' && tv && tv[0]) {
              item.targetName = tv[0].name;
              item.targetRepertory = tv[0] || {};
            }

            item = this.judgeRelationshipBetweenUserAndRepertory(item);
            return item;
          });
          
        })
        .catch(e => console.log('initialize', e));
    },
    jump(pageNum) {
      this.model.pageNum = pageNum;
      this.loadData();
    },
    pageSizeChange(pageSize) {
      this.model.pageSize = pageSize;
      this.originModel.pageSize = pageSize;

      this.loadData();
      StorageUtil.save(STORAGE_PAGESIZE_KEY, pageSize);
    },
    search() {
      this.trackEventHandler('search')
      this.isExpand = false;
      this.model.pageNum = 1;
      this.loadData();
    },
    reset() {
      this.trackEventHandler('reset')
      this.isExpand = false;
      this.model = _.assign({}, this.originModel);
      this.timeValue = [];
      this.updateTimeValue = [];
      this.sparepart.sparepartName = '';
      this.userApply.userId = '';
      this.userApprove.userId = '';
      this.state = '';
      this.repertoryName = '';
      this.loadData();
    },
    resetAll() {
      // 搜索条件初始化
      this.model = _.assign({}, this.originModel);
      this.userApply.prosperId = '';
      this.userApprove.approveId = '';
      this.targetType = '备件库';
      this.userApprove.options = _.cloneDeep(allPerson);
      // this.sparepart.options = _.cloneDeep(allPerson);
      this.sparepart.sparepartName = '';
      this.timeValue = [];
      this.updateTimeValue = [];
      this.loadData();
    },
    async loadData(boo) {
      if(boo){
        this.selected = []
      }
      this.pageLoading = true;
      try {
        this.page = await this.fetchData();
        this.TableKey = Date.now()
        // this.model.pageNum = this.page.pageNum;
        // this.model.pageSize = this.page.pageSize; list 接口返回 pageSize异常 不由后端刷新

        this.matchSelected();

        // 显示出入库办理详情
        this.$nextTick(() => {
          if (this.loadApplyDetail && !this.onceLoadApplyDetail) {
            this.onceLoadApplyDetail = true;

            let list = this.page?.list || [];
            if (list.length) this.showPartDealDetail(list[0]);
          }
        })
        
      } catch (error) {
        console.log(error, 'loadData');
      }
      this.pageLoading = false;
      return this.page.list;
    },
    // 发起人
    ApplyLoadMore(){
      this.UserApplyloadMoreOptions.pageNum += 1;
      this.fetchUserApply(this.UserApplyloadMoreOptions.keyword)
    },
    fetchUserApply(keyword) {
      // keyword 修改
      if(keyword !== this.UserApplyloadMoreOptions.keyword){
        this.UserApplyloadMoreOptions.pageNum = 1;
        this.UserApplyloadMoreOptions.keyword = keyword;
        this.userApply.options = [];
        this.UserApplyloadMoreOptions.disabled = false;
      }
      // 获取用户
      let model = {
        keyword,
        pageSize: 50,
        pageNum: this.UserApplyloadMoreOptions.pageNum
      };
      this.userApply.loading = true;
      this.$http
        .get('/partV2/repertory/users', model)
        .then(result => {
          if(!result.length){
            this.UserApplyloadMoreOptions.disabled = true;
          }
          this.userApply.options = [...this.userApply.options, ...result];
        })
        .catch(err => console.log(err, 'fetchUserApply'))
        .finally(() => (this.userApply.loading = false));
    },
    visibleUserApply(e) {
      if (this.userApply.prosperId === '') {
        setTimeout(() => {
          this.userApply.loading = false;
          this.userApply.options = _.cloneDeep(allPerson);
        }, 500);
      }
    },
    onScroll1(){
      if(this.targetType !== '个人备件库'){
        return
      }
      this.GetRepertory()
    },
    onScroll2(){
      if(this.sourceType !== '个人备件库'){
        return
      }
      this.GetRepertory()
    },
    GetRepertory(){
      let model = {
        pageSize: 50,
        pageNum: this.infiniteData.pageNum
      };
      this.$http
        .get('/partV2/repertory/users', model)
        .then(
          result => {
            if(!result.length){
              this.infiniteData.disabled = true;
            }
            this.infiniteData.pageNum += 1;
            let resultData = result.map(item => {
              item = {
                id: item.userId || '',
                name: item.displayName || '',
                staffId: item.staffId || '',
                head: item.head || '',
              };
              return item;
            });
            this.repertory = [...this.repertory, ...resultData]
          }
        )

        .catch(err => console.log(err, 'fetchUserApprove'))
        .finally(() => (this.userApprove.loading = false));
    },
    // 办理人下拉分页
    ApproveLoadMore(){
      this.UserApproveloadMoreOptions.pageNum += 1;
      this.fetchUserApprove(this.UserApproveloadMoreOptions.keyword)
    },
    fetchUserApprove(keyword) {
      // keyword 修改
      if(keyword !== this.UserApproveloadMoreOptions.keyword){
        this.UserApproveloadMoreOptions.pageNum = 1;
        this.UserApproveloadMoreOptions.keyword = keyword;
        this.userApprove.options = [];
        this.UserApproveloadMoreOptions.disabled = false;
      }
      // 获取用户
      let model = {
        keyword,
        pageSize: 50,
        pageNum: this.UserApproveloadMoreOptions.pageNum
      };
      this.userApprove.loading = true;
      this.$http
        .get('/partV2/repertory/users', model)
        .then(
          result => {
            if(!result.length){
              this.UserApproveloadMoreOptions.disabled = true;
            }
            this.userApprove.options = [...this.userApprove.options, ...result];
          }
        )

        .catch(err => console.log(err, 'fetchUserApprove'))
        .finally(() => (this.userApprove.loading = false));
    },
    visibleUserApprove(e) { 
      if (this.userApprove.approveId === '') {
        setTimeout(() => {
          this.userApprove.loading = false;
          this.userApprove.options = _.cloneDeep(allPerson);
        }, 500);
      }
    },
    fetchSparepart(keyword) {
      // 获取备件
      let model = {
        keyWord: keyword,
        // enable: 1,
        pageSize: 50,
      };
      this.sparepart.loading = true;
      this.$http
        .post('/partV2/repertory/sparepart/list', model)
        .then(result => (this.sparepart.options = result.list))
        .catch(err => console.log(err, 'fetchSparepart'))
        .finally(() => (this.sparepart.loading = false));
    },

    chooseUserApply(value) {
      if (this.model.prosperId === value) {
        this.model.prosperId = '';
        return
      }
      this.model.prosperId = value;
      this.model.pageNum = 1;
      this.loadData();
    },
    chooseUserApprove(value) {
      this.model.approveId = value;
    },
    chooseSparepart(value) {
      if (this.sparepart.sparepartName == value) return;
      this.sparepart.sparepartName = value;
      this.model.sparepartName = value;
    },
    hooseSparepartType(value) {
      if (this.sparepart.sparepartType == value) return;
      this.sparepart.sparepartType = value;
      this.model.sparepartType = value;
    },
    fetchData() {
      const params = _.cloneDeep(this.model)
      if(params.state.length === 1 && params.state[0] === '') {
        // fix bug 9419，后端接口接受state为空时，接口运算加载时间过长，后期需要重构，因为是生产bug，紧急，先由前端fix。
        params.state = ['suspending', 'dealing', 'solved', 'rejected', 'cancel', 'revoked'];
      }
      objectDateToTimestamp(this.model, [
        'prosperTimeStart',
        'prosperTimeEnd',
        'approveTimeStart',
        'approveTimeEnd',
      ])
      // 获取申请列表
      return this.$http
        .post('/partV2/approve/approveList/list', params)
        .then(result => {
          // repertory
          let list = (result.data.list || []).map(item => {
            item.approveTime = item.approveTime
              ? formatDate(
                safeNewDate(item.approveTime),
                'YYYY-MM-DD HH:mm:ss'
              )
              : '';
            item.prosperTime = item.prosperTime
              ? formatDate(
                safeNewDate(item.prosperTime),
                'YYYY-MM-DD HH:mm:ss'
              )
              : '';
            let tv = this.repertories.filter(r => r.id === item.targetId);
            if (item.type === '调拨' && tv && tv[0]) {
              item.targetName = tv[0].name;
              item.targetRepertory = tv[0] || {};
            }

            item.disabled = false;

            item = this.judgeRelationshipBetweenUserAndRepertory(item);
            return item;
          });
          list.forEach(item=>{
            if(item.sparepartIds.length > 3){
              item.showState = 'close';
            }
            item.remarkDetail = ''; // 备注详情
            item.remarkReq = false; // 是否已请求过备注详情
          })
          return {
            ...result.data,
            list
          };
        });
    },
    judgeRelationshipBetweenUserAndRepertory(row) {
      const userId = this.userId;

      if (!row || !row.sparepartRepertory || !row.targetRepertory) return row;

      if (
        row.sparepartRepertory.repertory.manager.some(m => m.userId === userId)
      ) {
        row.isOriginalRepertoryManager = true;
      }

      if (row.targetRepertory.manager.some(m => m.userId === userId)) {
        row.isTargetRepertoryManager = true;
      }
      return row;
    },
    fetchRepertory() {
      // 获取仓库类型
      return this.$http.get('/partV2/approve/repertory').then(result => {
        this.repertory = result || [];
      });
    },

    // 获取全部仓库列表
    fetchAllRepertory() {
      return this.$http
        .get('/partV2/repertory/allRepertory')
        .then(result => {
          return (this.repertories = result || []);
        })
        .catch(err => console.warn(err));
    },
    chooseSourceType(e) {
      this.model.sourceIds = [];
    },
    chooseTargetType(e) {
      this.model.targetIds = [];
      this.trackEventHandler('chooseTargetType');
    },
    chooseRepertory(value) {
      this.trackEventHandler('chooseRepertory');

      // this.repertoryName = value;
      // if(value){
      //   this.model.repertoryId = value
      // }else{
      //   delete this.model.repertoryId
      // }
      this.model.pageNum = 1;
      this.loadData();
    },
    chooseState(value) {
      this.stateTrackEventHandler(value);

      if(value.length && value[value.length - 1] === ''){
        this.model.state = [''];
      }else if(value.length && value[value.length - 1]){
        this.model.state = this.model.state.filter(item=>item);
      }

      this.model.pageNum = 1;
      this.loadData();
    },
    chooseApplyType(value){
      this.model.pageNum = 1;
      this.loadData();
    },
    fecthSparepartConfig() {
      // 获取备件设置
      return this.$http
        .post('/partV2/repertory/sparepartConfig')
        .then(result => {
          this.sparepartConfig = result;
        });
    },
    /** 办理出库 */
    outstock(value) {
      if (!this.isPersonalRepertory) {
        return this.personalRepertoryNotMeaage();
      }
      this.outstockDialog = true;
      this.formdata = value;
    },
    /** 入库 */
    instock(value) {
      if (!this.isPersonalRepertory) {
        return this.personalRepertoryNotMeaage();
      }
      this.instockDialog = true;
      this.formdata = value;
    },
    /** 取消 */
    backstock(value) {
      if (!this.isPersonalRepertory) {
        return this.personalRepertoryNotMeaage();
      }
      this.backstockDialog = true;
      this.formdata = value;
      //
    },
    openTransferDialog(value, action) {
      this.transferDialog = true;
      this.formdata = {
        ...value,
        action
      };
    },
    transfer() {
      const form = this.$refs.transferForm.pack();
      const action = form.action;
      const params = {
        id: form.applayId,
        solvedVariation: form.sparesNum,
        remark: form.remarks
      };
      this.pending = true;
      const actionName = action ? '接收调入' : '拒绝调入';
      const url = action
        ? '/partV2/approve/transfer/accept'
        : '/partV2/approve/transfer/reject';

      this.$http
        .post(url, params)
        .then(res => {
          if (!res.status) {
            this.$platform.toast(`${actionName}${t('common.base.success')}`);
            this.transferDialog = false;
            this.pending = false;
            this.loadData();
            return;
          }

          this.$platform.toast(res.message, 'warning');
          this.pending = false;
        })
        .catch(error => {
          this.$platform.toast(`${actionName}${t('common.base.fail')}`, 'error');
          console.log('transfer', error);
        });
    },

    /** 调拨撤回（弹窗） **/
    openCancelTransferDialog(value) {
      this.tableTrackEventHandler('recall');

      this.cancelTransferDialog = true;
      this.formdata = value;
    },
    cancelTransfer() {
      const form = this.$refs.cancelTransferForm.pack();
      const params = {
        id: form.applayId,
        solvedVariation: form.sparesNum,
        remark: form.remarks
      };
      this.pending = true;

      this.$http
        .post('/partV2/approve/transfer/revoke', params)
        .then(res => {
          if (!res.status) {
            this.$platform.toast(t('part.tips77'));
            this.loadData();
            this.cancelTransferDialog = false;
            this.pending = false;
            return;
          }

          this.$platform.toast(res.message, 'warning');
          this.pending = false;
        })
        .catch(error => {
          this.$platform.toast(t('part.tips78'), 'error');
          console.log('cancelTransfer', error);
        });
    },
    /** 分配撤回 (弹窗) */
    reStockOpenDialog(value) {
      this.tableTrackEventHandler('recall');

      if (!this.isPersonalRepertory) {
        return this.personalRepertoryNotMeaage();
      }
      this.reStockDialog = true;
      this.formdata = value;
    },
    /** 分配撤回 */
    async reStock() {
      let form = this.$refs.reStockForm;
      if (null == form) return;

      let reStockForm = await form.pack();
      if (!reStockForm) return;

      this.pending = true;
      let params = {
        id: reStockForm.applayId,
        solvedVariation: Number(reStockForm.sparesNum),
        remark: reStockForm.remarks
      };
      try {
        let result = await this.$http.post(
          '/partV2/approve/allot/revoke',
          params
        );
        if (result.status == 0) {
          this.$platform.toast(t('part.tips79'));
          this.reStockDialog = false;
          this.loadData();
        } else {
          this.$platform.alert(result.message);
        }
      } catch (error) {
        console.log(error, 'reStock');
      }
      this.pending = false;
    },
    // 出库
    async outstockSave() {
      let form = this.$refs.outstockForm;
      if (null == form) return;
      let outstock = await form.pack();
      if (null == outstock) return;
      this.pending = true;
      try {
        let result = await this.$http.get(
          '/partV2/approve/inOutStore',
          outstock
        );
        if (result.status == 0) {
          this.$platform.toast(t('part.tips80'));
          this.outstockDialog = false;
          this.loadData();
        } else {
          this.$platform.alert(result.message);
        }
      } catch (error) {
        console.log(error, 'outstockSave');
      }
      this.pending = false;
    },
    async backstockSave() {
      let form = this.$refs.backstockForm;
      if (null == form) return;
      let backstock = await form.pack();
      if (null == backstock) return;
      this.pending = true;
      try {
        let result = await this.$http.get(
          '/partV2/approve/cancelApply',
          backstock
        );
        if (result.status == 0) {
          this.$platform.toast(t('common.base.tip.cancelSuccess'));
          this.backstockDialog = false;
          this.loadData();
        } else {
          this.$platform.alert(result.message);
        }
      } catch (error) {
        console.log(error, 'backstockSave');
      }
      this.pending = false;
    },
    // 入库
    async instockSave() {
      let form = this.$refs.instockForm;
      if (null == form) return;
      let instock = await form.pack();
      if (null == instock) return;
      this.pending = true;
      try {
        let result = await this.$http.get(
          '/partV2/approve/inOutStore',
          instock
        );
        if (result.status == 0) {
          this.$platform.toast(t('part.tips81'));
          this.instockDialog = false;
          this.loadData();
        } else {
          this.$platform.alert(result.message);
        }
      } catch (error) {
        console.log(error, 'instockSave');
      }
      this.pending = false;
    },
    async outstockBatchSave() {
      let form = this.$refs.outstockBatchForm;
      if (null == form) return;
      let outstock = await form.pack();
      if (null == outstock) return;
      this.pending = true;
      try {
        let result = await this.$http.post(
          '/partV2/approve/applyOutBach',
          outstock
        );
        if (result.status == 0) {
          this.$platform.toast(t('part.tips82'));
          this.outstockBatchDialog = false;
          this.loadData();
        } else {
          this.$platform.alert(result.message);
        }
      } catch (error) {
        console.log(error, 'outstockBatchSave');
      }
      this.pending = false;
    },
    async instockBatchSave() {
      let form = this.$refs.instockBatchForm;
      if (null == form) return;
      let instock = await form.pack();
      if (null == instock) return;
      this.pending = true;
      try {
        let result = await this.$http.post(
          '/partV2/approve/applyInBach',
          instock
        );
        if (result.status == 0) {
          this.$platform.toast(t('part.tips83'));
          this.instockBatchDialog = false;
          this.loadData();
        } else {
          this.$platform.alert(result.message);
        }
      } catch (error) {
        console.log(error, 'instockBatchSave');
      }
      this.pending = false;
    },
    // 出库（批量）
    outstockBatch(value) {
      if (!this.allowInout) {
        this.$platform.alert(t('part.tips84'));
        return;
      }
      if (value.length < 1) {
        this.$platform.alert(t('part.tips85'));
        return;
      }
      if (value.length > 5) {
        this.$platform.alert(t('part.tips86', {num:5}));
        return;
      }

      if (!this.isPersonalRepertory) {
        return this.personalRepertoryNotMeaage();
      }

      for (let i = 0; i < value.length; i++) {
        if (
          value[i].type == '退回'
          || value[i].type == '分配'
          || value[i].state != 'suspending'
        ) {
          this.$platform.alert(
            t('part.tips87')
          );
          return;
        }
      }
      this.outstockBatchDialog = true;
      this.formdata = value;
    },
    // 入库（批量）
    instockBatch(value) {
      if (!this.allowInout) {
        this.$platform.alert(t('part.tips84'));
        return;
      }
      if (value.length < 1) {
        this.$platform.alert(t('part.tips85'));
        return;
      }
      if (value.length > 5) {
        this.$platform.alert(t('part.tips86', {num:5}));
        return;
      }
      if (!this.isPersonalRepertory) {
        return this.personalRepertoryNotMeaage();
      }
      for (let i = 0; i < value.length; i++) {
        if (
          value[i].type == '申领'
          || value[i].type == '分配'
          || value[i].state != 'suspending'
        ) {
          this.$platform.alert(
            t('part.tips88')
          );
          return;
        }
      }
      this.instockBatchDialog = true;
      this.formdata = value;
    },
    partDealDataCancel(approveNo) {
      // 拒绝
      this.$refs['rejectForm'].validate((valid, obj) => {
        if (valid) {
          this.pending = true
          // 拒绝
          rejectBatch({
            approveNo,
            remark: this.rejectForm.reason
          }).then(res => {
            this.pending = false
            if (res.code == 0) {
              this.partDealDialog = false;
              this.backstockDialog = false;
              this.$message({
                showClose: true,
                message: res.message,
                type: 'success'
              });
              setTimeout(()=>{
                this.loadData();
              }, 1000);
            } else {
              this.$message({
                showClose: true,
                message: res.message || 'http error',
                type: 'error'
              });
            }
          });
        }
      });
    },
    partDealDataReset(approveNo) {
      this.pending = true
      // 撤销
      revokeBatch({
        approveNo,
        remark: this.rejectForm.reasons
      }).then(res => {
        this.pending = false
        if (res.code == 0) {
          this.partDealDialog = false;
          this.backstockDialog = false;
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success'
          });
          setTimeout(()=>{
            this.loadData();
          }, 1000);
        } else {
          this.$message({
            showClose: true,
            message: res.message || 'http error',
            type: 'error'
          });
        }
      });
    },

    buildParams(pageNum, pageSize) {
      return {
        ...this.model,
        pageNum,
        pageSize
      };
    },
    buildColumns() {
      let localData = StorageUtil.get(STORAGE_COLNUM_KEY) || {};

      let columns = [
        {
          label: t('part.field5'),
          field: 'prosperTime',
          exportAlias: 'proposeTime',
          show: true,
          // sortable: "custom",
          width: 160
        },
        {
          label: t('common.form.preview.stock.sparepartStockDisplayName.approveNo'),
          exportAlias: 'approveNo',
          field: 'approveNo',
          overflow: true,
          show: true,
          width: 160,
          clickFnc: obj => {
            this.showPartDealDetail(obj);
          }
        },
        {
          label: t('common.label.status'),
          exportAlias: 'state',
          field: 'state',
          // sortable: "state",
          width: 90,
          overflow: true,
          show: true
        },
        {
          label: t('common.form.preview.stock.sparepartStockDisplayName.type'),
          exportAlias: 'type',
          field: 'type',
          width: 90,
          overflow: true,
          show: true
        },
        {
          label: `${t('common.fields.partName.displayName')}/${t('common.label.serialNumber')}/${t('common.part.specifications')}`,
          field: 'sparepartIds',
          exportAlias: 'sparepartName',
          show: true,
          minWidth: 350,
          overflow: false,
        },
        {
          label: t('common.form.preview.materialVerifyEliminate.applyNum'),
          exportAlias: 'variation',
          field: 'showNum',
          width: 90,
          overflow: true,
          show: true
        },
        {
          label: `${t('part.text41')}/${t('part.text42')}`,
          field: 'applyCount',
          exportAlias: 'pendingVariation,solvedVariation',
          show: true,
          width: 110
        },
        {
          label: `${t('common.form.type.currency')}(¥)`,
          exportAlias: 'price',
          field: 'showPrice',
          width: 100,
          overflow: true,
          show: true
        },
        {
          label: t('part.field3'),
          field: 'targetName',
          exportAlias: 'targetName',
          show: true,
          minWidth: 120,
          overflow: true
        },
        {
          label: t('common.form.preview.stock.sparepartStockDisplayName.sourceTargetName'),
          field: 'sourceTargetName',
          exportAlias: 'sourceName',
          show: true,
          minWidth: 120,
          overflow: true
        },
        {
          label: t('common.form.preview.relatedPart.approver'),
          field: 'prosperName',
          exportAlias: 'prosperName',
          width: 90,
          overflow: true,
          show: true
        },
        {
          label: t('common.base.remark'),
          field: 'remark',
          exportAlias: 'remark',
          show: true,
          minWidth: 100,
          overflow: false,
        },
        
        {
          field: 'approveName',
          label: t('common.form.preview.stock.sparepartStockDisplayName.approveName'),
          exportAlias: 'executorName',
          show: true,
          width: 100,
          overflow: true
        },
        {
          field: 'approveTime',
          label: t('common.form.preview.stock.sparepartStockDisplayName.approveTime'),
          exportAlias: 'updateTime',
          show: true,
          width: 160,
          overflow: false
          // sortable: "approveTime"
        },
        {
          label: t('common.label.operate'),
          field: 'enable',
          width: '150px',
          show: true,
          fixed: 'right',
          export: false
        }
      ];

      columns.forEach(column => {
        let isShow = localData[column.field];
        if (typeof isShow == 'boolean') column.show = isShow;
      });

      return columns;
    },
    // 暂时，备注&备件信息不导出，后台实现后删除
    builcExportColumns(){
      let localData = StorageUtil.get(STORAGE_COLNUM_KEY) || {};

      let columns = [
        {
          label: t('part.field5'),
          field: 'prosperTime',
          exportAlias: 'proposeTime',
          show: true,
          export: true,
          // sortable: "custom",
          width: 160
        },
        {
          label: t('common.form.preview.stock.sparepartStockDisplayName.approveNo'),
          exportAlias: 'approveNo',
          field: 'approveNo',
          overflow: true,
          show: true,
          export: true,
          width: 200,
          clickFnc: obj => {
            this.showPartDealDetail(obj);
          }
        },
        {
          label: t('common.label.status'),
          exportAlias: 'state',
          field: 'state',
          // sortable: "state",
          width: 100,
          export: true,
          overflow: true,
          show: true
        },
        {
          label: t('common.form.preview.stock.sparepartStockDisplayName.type'),
          exportAlias: 'type',
          field: 'type',
          width: 100,
          export: true,
          overflow: true,
          show: true
        },
        {
          label: `${t('common.fields.partName.displayName')}/${t('common.label.serialNumber')}/${t('common.part.specifications')}`,
          field: 'sparepartIds',
          exportAlias: 'sparepartName',
          show: true,
          export: true,
          minWidth: 170,
          overflow: false,
        },
        {
          label: t('common.form.preview.subForm.displayName.applyNum'),
          exportAlias: 'variation',
          field: 'showNum',
          width: 100,
          export: true,
          overflow: true,
          show: true
        },
        {
          label: `${t('common.form.type.currency')}(¥)`,
          exportAlias: 'price',
          field: 'showPrice',
          width: 100,
          export: true,
          overflow: true,
          show: true
        },
        {
          label: t('part.field3'),
          field: 'targetName',
          exportAlias: 'targetName',
          show: true,
          export: true,
          minWidth: 120,
          overflow: true
        },
        {
          label: t('common.form.preview.stock.sparepartStockDisplayName.sourceTargetName'),
          field: 'sourceTargetName',
          exportAlias: 'sourceName',
          show: true,
          export: true,
          minWidth: 120,
          overflow: true
        },
        {
          label: t('common.form.preview.stock.sparepartStockDisplayName.prosperName'),
          field: 'prosperName',
          exportAlias: 'prosperName',
          width: 100,
          export: true,
          overflow: true,
          show: true
        },
        {
          label: `${t('part.text41')}/${t('part.text42')}`,
          field: 'applyCount',
          exportAlias: 'pendingVariation,solvedVariation',
          show: true,
          export: true,
          width: 160
        },
        {
          field: 'approveName',
          label: t('common.form.preview.stock.sparepartStockDisplayName.approveName'),
          export: true,
          exportAlias: 'executorName',
          show: true,
          width: 100,
          overflow: true
        },
        {
          field: 'approveTime',
          label: t('common.form.preview.stock.sparepartStockDisplayName.approveTime'),
          export: true,
          exportAlias: 'updateTime',
          show: true,
          width: 160,
          overflow: false
          // sortable: "approveTime"
        },
        {
          label: t('common.label.operate'),
          field: 'enable',
          width: '150px',
          show: true,
          fixed: 'right',
          export: false
        },
        {
          label: t('common.base.remark'),
          field: 'remark',
          exportAlias: 'remark',
          export: true,
          show: true,
          minWidth: 100,
          overflow: false,
        },
      ];

      columns.forEach(column => {
        let isShow = localData[column.field];
        if (typeof isShow == 'boolean') column.show = isShow;
      });

      return columns;
    },
    personalRepertoryNotMeaage() {
      return this.$platform.alert(
        '个人备件库功能已经关闭，需系统管理员开启个人备件库功能(系统管理-备件库管理)后继续操作。'
      );
    },
    // TalkingData事件埋点
    trackEventHandler(type) {
      switch (type) {
      case 'search':
        this.$tdOnEvent('pc：办理出入库-搜索事件');
        break;
      case 'reset':
        this.$tdOnEvent('pc：办理出入库-重置事件');
        break;
      case 'advSearch':
        this.$tdOnEvent('pc：办理出入库-高级搜索事件');
        break;
      case 'chooseRepertory':
        this.$tdOnEvent('pc：办理出入库-原始仓库筛选下拉框事件');
        break;
      case 'chooseSourceType':
        this.$tdOnEvent('pc：办理出入库-目标仓库筛选下拉框事件');
        break;
      case 'batch-stock-out':
        this.$tdOnEvent('pc：办理出入库-批量出库事件');
        break;
      case 'batch-stock-in':
        this.$tdOnEvent('pc：办理出入库-批量入库事件');
        break;
      case 'selectColumn':
        this.$tdOnEvent('pc：办理出入库-选择列事件');
        break;
      default:
        break;
      }
    },
    // state (selector) TalingData事件埋点
    stateTrackEventHandler(type) {
      switch (type) {
      case '':
        this.$tdOnEvent('pc：办理出入库-全部事件');
        break;
      case 'suspending':
        this.$tdOnEvent('pc：办理出入库-待办理事件');
        break;
      case 'dealing':
        this.$tdOnEvent('pc：办理出入库-办理中事件');
        break;
      case 'solved':
        this.$tdOnEvent('pc：办理出入库-已办理事件');
        break;
      case 'rejected':
        this.$tdOnEvent('pc：办理出入库-已拒绝事件');
        break;
      case 'cancel':
        this.$tdOnEvent('pc：办理出入库-已取消事件');
        break;
      case 'revoked':
        this.$tdOnEvent('pc：办理出入库-已撤回事件');
        break;
      default:
        break;
      }
    },
    // table TalkingData事件埋点
    tableTrackEventHandler(type) {
      switch (type) {
      case 'done':
        this.$tdOnEvent('pc：办理出入库-列表办理事件');
        break;
      case 'reject':
        this.$tdOnEvent('pc：办理出入库-列表拒绝事件');
        break;
      case 'recall':
        this.$tdOnEvent('pc：办理出入库-列表撤回事件');
        break;
      default:
        break;
      }
    },
    variationNum(num1, num2) {
      return this.$math.format(
        this.$math.subtract(
          this.$math.bignumber(num1),
          this.$math.bignumber(num2)
        )
      );
    },
    headerClick(option) {
      if (option.order == null) {
        this.model[option.property] = option.order ? option.order : '';
        this.loadData();
      }
    },
    sortChange(option) {
      // TO DO 表单排序
      console.log(option);
    },

    updateDetail(obj){
      this.showPartDealDetail(obj, true);
    },
    showPartDealDetail(obj, flag = false) {
      getRelationListByApproveNo({
        approveNo: obj.approveNo
      }).then(res => {
        if (res.code != 0) {
          return this.$message({
            showClose: true,
            message: res.message || 'http error',
            type: 'error'
          });
        }
        let result = res.result;
        let {
          prosperTime,
          approveNo,
          type,
          prosperName,
          targetName,
          sourceTargetName,
          state,
          cancel,
          isreject,
          suggestion,
          approved,
          prosperStaffId,
          targetStaffId
        } = obj;
        
        if (result.relations.length > 0) {
          result.relations = result.relations.map(item => {
            item.handleNum = '';
            item.checked = false;
            item.variation = Math.abs(item.variation);
            item.solvedVariation = Math.abs(item.solvedVariation);
            if(item.variation === item.solvedVariation){
              item.disabled = true;
            }else{
              item.disabled = false;
            }
            item['number'] = Math.abs(item.variation) - (Math.abs(item.solvedVariation) || 0);
            return item;
          });
        }
        this.partDealData = {
          arr: result.relations || [],
          data: {
            prosperTime,
            approveNo,
            type,
            prosperName,
            prosperStaffId,
            targetStaffId,
            targetName:flag ? result.relations[0].targetName : targetName,
            sourceTargetName,
            state,
            cancel,
            isreject,
            approved,
            suggestion,
            targetId:result.relations[0].targetId,
            remark: result.list.remark || '',
            staffs: result.staffs,
            businessInfo: result.list.businessInfo || '',
            businessInfoId: result.list.businessInfoId || '',
            businessType: result.list.businessType || '',
            businessTypeStr: result.list.businessTypeStr || '',
            approveInfo: result.approveInfo || {},

          },
          progress:result.progress.filter(item=>item.state < 7)
        };
        if(this.partDealData.data.state === 'suspending' || this.partDealData.data.state === 'dealing'){
          this.partDealTitle = `${t('part.text43')}-${this.partDealData.data.type}`;
        }else{
          this.partDealTitle = t('part.text44');
        }
        if(!flag) this.partDealDialog = true;
        if(flag){
          this.partDealKey++;
          this.loadData();
        }
      });
    },
    // 构建表格列
    buildTableColumn() {
      let baseColumns = this.buildColumns();
      const localStorageData = this.getLocalStorageData();
      let columnStatus = (localStorageData.columnStatus && localStorageData.columnStatus[this.selectColumnState]) || [];
      let localColumns = columnStatus
        .map(i => (typeof i == 'string' ? { field: i, show: true } : i))
        .reduce((acc, col) => (acc[col.field] = col) && acc, {});
      let columns = [...baseColumns].map(col => {
        let show = col.show;
        let width = col.width;
        let localField = localColumns[col.field];
        if (null != localField) {
          width = typeof localField.width == 'number'
            ? `${localField.width}px`
            : `${localField.width}`.indexOf('px') ? localField.width : '';
          show = localField.show !== false;
        }
        col.show = show;
        col.width = width;
        col.type = 'column';

        return col;
      });

      if (this.isBasicEditionHideProduct) {
        columns = columns.filter(item => item.field !== 'esProductEntities')
      }

      return columns;
    },

    /**
     * @des 提供给快捷筛选视图的方法
     */
    fasterFilterList(keyObj){
      try {
        for(let key in keyObj){
          let value = keyObj[key]
          this.model[key] = value;
        }
        this.model.pageNum = 1;
        this.loadData();
      } catch (error) {
        console.warn(error, 'fasterFilterList error try catch');
      }
    },
    /**
     * @des 查询是否有查询参数
     */
    findFastPageData(data){
      try {
        let parseData = sessionStorageGet(`bbx-faster-${pageSparepartApply.type}`);
        if(parseData){
          sessionStorageRemove(`bbx-faster-${pageSparepartApply.type}`);
        }
        if(!data && !parseData) return
        const {filterData} = data || JSON.parse(parseData);
        this.fasterFilterList(filterData);
      } catch (error) {
        console.warn(error, 'findFastPageData error try catch');
      }
    },
    /**
     * @des 获取列表当前的可滚动高度
     */
		 knowTableContainerHeight(){
      let min = 440;
      try {
        let window_ = window.innerHeight;
        let header = this.$refs.tableHeaderContainer?.offsetHeight || 0;
        let do_ = this.$refs.tableDoContainer?.offsetHeight || 0;
        let footer = this.$refs.tableFooterContainer?.offsetHeight || 0;
        let selection = this.$refs.BaseSelectionBarComponent?.offsetHeight || 0;
        // selection = selection ? selection + 8 : selection;
        min = window_ - header * 1 - do_ * 1 - footer * 1 - selection * 1 - 20 - 10;
        console.log(window_, header, do_, footer, selection, 'window_, header, do_, footer, selection');
        console.log(min, 'min')
        min = min > 440 ? min : 440;
      } catch (error) {
        console.warn(error, 'error try catch');
      }
      this.$set(this, 'tableContainerHeight', `${min}px`)
    },
    changePackUp(){
      this.packUp = !this.packUp;
      this.$nextTick(()=>{
        this.knowTableContainerHeight()
      })
    }
  },
  mounted() {
    let initData = this.initData || {};
    if(window.location.search === '?fromId=1'){
      this.model.type = '分配';
    }

    this.types = initData.sparepartType || [];
    this.auths = initData.auths || {};
    this.userId = initData.userId || '';
    this.userName = initData.userName || '';
    this.isPersonalRepertory = initData.isPersonalRepertory || false;
    if(location.search && this.isPersonalRepertory){
      this.model.type = ['分配'];
    }

    let query = qs.parse(window.location.search)

    // 默认 3个月申请日期
    const start = +nearDateBy(3, 'month', 'start');
    const end = +dayTimeEnd();
    this.timeValue = [start, end];
    // 打开详情弹窗
    if (query.approveNo && this.loadApplyDetail) {
      this.model.keyWord = query.approveNo;
      this.model.state = [];
      this.model.type = [];
      this.timeValue = []
    }
    this.seeTime()
    this.columns = this.buildTableColumn();
    this.initialize();
    let that_ = this;
    // 监听切换后需要重新计算列表高度 后续可以用activated生命周期替换
    window.addEventListener('message', (event)=> {
      const {action, data} = event.data;
      if (action == 'shb.frame.activatedPage'){
        that_.$nextTick(()=> {
          that_.knowTableContainerHeight();
        })
      }
    });
    this.$nextTick(()=> {
      this.knowTableContainerHeight()
      window.onresize = _.debounce(()=>{
        that_.knowTableContainerHeight()
      }, 500)
    })
  },
  components: {
    PartCancelTransferForm,
    [PartBackStockForm.name]: PartBackStockForm,
    [PartOutStockForm.name]: PartOutStockForm,
    [PartInStockForm.name]: PartInStockForm,
    [PartApplyFormBatchOut.name]: PartApplyFormBatchOut,
    [PartApplyFormBatchIn.name]: PartApplyFormBatchIn,
    [PartReStockForm.name]: PartReStockForm,
    [PartCancelTransferForm.name]: PartCancelTransferForm,
    [PartTransferForm.name]: PartTransferForm,
    BaseSearchDrawer,
    [BatchHandleDialog.name]: BatchHandleDialog,
    [SingleHandleDialog.name]: SingleHandleDialog
  }
};
</script>

<style lang="scss">
.no-padding {
  padding: 0;
}
.srp-user-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 2px 0;
  justify-content: space-between;

  &:last-child {
    margin: 0;
  }

  img {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 28px;
  }

  p {
    flex: 1;
    margin: 0;
    margin-left: 10px;
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
    line-height: 28px;
    width: 0;
  }
}

.customize-el-dropdown-btn {
  padding: 0 15px;
  line-height: 32px;
  display: inline-block;
  background: $color-primary-light-9;
  color: $text-color-primary;
  outline: none;
  margin-left: 5px;
  .iconfont {
    margin-left: 5px;
    font-size: 12px;
  }

  &:hover {
    cursor: pointer;
    color: #fff;
    background: $color-primary;
  }
}

.part-option {
  margin: 5px 0;

  p {
    overflow: hidden;
    margin: 0;
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.part-selected-panel {
  font-size: 14px;
  height: calc(100% - 51px);

  .part-selected-tip {
    padding-top: 80px;

    img {
      display: block;
      width: 160px;
      margin: 0 auto;
    }

    p {
      text-align: center;
      color: $text-color-regular;
      margin: 8px 0 0 0;
      line-height: 20px;
    }
  }

  .part-selected-list {
    height: 100%;
    padding: 10px;
    overflow-y: auto;

    .part-selected-row {
      display: flex;
      flex-flow: row nowrap;
      line-height: 36px;
      border-bottom: 1px solid #ebeef5;
      font-size: 13px;

      &:hover {
        background-color: #f5f7fa;

        .part-selected-delete {
          visibility: visible;
        }
      }
    }

    .part-selected-head {
      background-color: #f0f5f5;
      color: #333;
      font-size: 14px;
    }

    .part-selected-sn {
      padding-left: 10px;
      width: 70px;
      @include text-ellipsis;
    }

    .part-selected-name {
      padding-left: 10px;
      flex: 1;
      @include text-ellipsis;
    }

    .part-selected-delete {
      width: 36px;
    }

    .part-selected-row button.part-selected-delete {
      padding: 0;
      width: 36px;
      height: 36px;
      border: none;
      background-color: transparent;
      outline: none;
      color: #646b78;
      visibility: hidden;

      i {
        font-size: 14px;
      }

      &:hover {
        color: #e84040;
      }
    }
  }
}

.part-panel-btn {
  float: right;
  cursor: pointer;
  width: 16px;
  height: 16px;
  background: url("../../../assets/img/clear.png") no-repeat center;
  background-size: cover;

  &:hover {
    background: url("../../../assets/img/clear-hover.png") no-repeat center;
    background-size: cover;
  }
}

.flex-x {
  display: flex;
  align-items: center;
}
.flex-1 {
  flex: 1;
}

a {
  cursor: pointer;
}
.group-select {
  display: inline-block;
}
.mar-b-15 {
  margin-bottom: 15px;
}
.mar-r-15 {
  margin-right: 15px;
}
.ding-btn {
  color: $color-ding-blue;
  cursor: pointer;
}

.showMore{
  @include fontColor();
  cursor:pointer;
}
.page-panel{
  margin-bottom:0;
}
</style>

<style lang='scss' scoped>
.page{
  overflow:visible;
}
.el-row{
  .el-select{
    margin-right: 10px;
  }
}
.zt-clz{
  margin-right: 20px;
  ::v-deep .el-input{
    width: auto !important;

    input{
      width: auto !important;
      padding-right: 0;
    }
  }
}

.page-panel-body {
  clear: both;
  overflow: hidden;

  .pull-right{
    .el-dropdown-btn{
      padding:0 15px;
      line-height: 30px;
    }
  }
}

.item{
  display: inline-block;
}
.tooltipWrapper{
  background: #fe8b2514;
  font-size: 12px;
  padding: 0 7px;
  line-height: 28px;
  margin-bottom: 8px;

  .toolText{
    cursor: pointer;
    color:$color-primary;
  }
}

.state-text{
  display: inline-block;
  border-radius: 11px;
  text-align: center;
  width: 54px;
  height: 22px;
  font-size: 12px;
  box-sizing: border-box;
  line-height: 22px;
}
// 已办理
.state-solved{
  color:#FFF;
  background: rgba(38, 198, 218, 1);
}

// 待办理
.state-suspending{
  color:#FFF;
  background: rgba(255, 112, 67, 1);
}

// 办理中
.state-dealing{
  color:#FFF;
  background: rgba(41, 182, 246, 1);
}

// 已取消
.state-cancel {
  color:#FFF;
  background: rgba(189, 189, 189, 1);
}

// 已撤回
.state-revoked{
  color:#FFF;
  background: rgba(146, 165, 173, 1);
}

// 已拒绝
.state-rejected{
  color:#FFF;
  background: rgba(255, 77, 79, 1);
}
.repertory-apply-view-header-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 24px;
}
.repertory-apply-view-header-search {
  display: flex;
  align-items: center;
  // justify-content: flex-end;
  // flex: 1;
  .el-input-group {
    width: 400px;
  }
  .el-select {
    margin-left: 10px !important;
  }
}

.base-search-row {
  display: flex;
  & + .base-search-row {
    margin-top: 10px;
  }
  .base-search-col {
    width: 180px;
  }
}

.base-search {
  flex-flow: column;
}

.srp-list-form-item-origin {
  flex: 1;
}

.danger-color {
  color: #f56c6c !important;
}
::v-deep .el-table__row .sparepartIds .cell{
  height: auto !important;
}
</style>